<template>
  <div id="framHouseAQ">
    <div class="topZhuZhuangTu" style="width:355px;height:220px" id="topZhuZhuangTu1"></div>
    <div class="bottomZhu" style="width:355px;margin-top:-40px;margin-left:10px" id="bottomZhu1"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      autoHeight: 0
    }

  },
  methods: {
    _initConstruction () {
      const self = this;
      //   var xData = ['申请量', '审批量', '超期量'];
      //   var yData = [4991, 2048, 0];
      this.num = 0;
      const option = {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        color: ['#48cda6', '#fd87ab', '#11abff', '#ffdf33', '#968ade', 'yellow', 'blue', 'red'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 72810, name: 'I级' },
              { value: 417205, name: 'II级' },
              { value: 2404814, name: 'III级' },
              { value: 6995619, name: 'IV级' },
            ],
            // label: {
            //   normal: {
            //     formatter: function (params){
            //       return params.name + "<br/>" + params.value + '，'  + params.value/10000 + '%'
            //     },
            //   }
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      const element = self.$echarts.init(document.getElementById("topZhuZhuangTu1"));
      element.clear();
      element.setOption(option);
    },
    _initConstructionBottom () {
      const self = this;
      var xData = ['施工工匠', '施工单位', '竣工验收'];
      var yData = [264, 11, 17];
      this.num = 0;
      const option = {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        color: ['blue', '#f8bb52'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '农房巡查',
            data: [80, 180, 80, 200, 280, 370],
            type: 'line'
          },
          {
            name: '风险处置',
            data: [120, 80, 120, 140, 300, 300],
            type: 'line'
          }
        ]
      };
      const element = this.$echarts.init(document.getElementById("bottomZhu1"));
      this.autoHeight = 180 + 'px'; // counst.length为柱状图的条数，即数据长度。35为我给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。
      element.resize({ height: this.autoHeight });
      if (element) {
        element.clear();
        element.setOption(option);
      }
    },
  },
  mounted () {
    this._initConstruction()
    this._initConstructionBottom()
  }
}
</script>

<style lang="scss" scoped>
#framHouseAQ {
  //   height: 54vh;
  overflow: auto;
  background: #ffffff;
  font-size: 14px;
  position: relative;
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
}
</style>
